<script src="/echarts/echarts.common.min.js"></script>
<div id="echart" style="width: 100%;height:400px;">ssss</div>
<input type="hidden" name="endX" value="{{ $endX }}">
<script type="text/javascript">
    Dcat.ready(function () {
        var myChart = echarts.init(document.getElementById('echart'));
 
        // 指定图表的配置项和数据
        // var chartXData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        // var chartYData = [820, 932, 901, 934, 1290, 1330, 1320];
        var chartXData = {!! $xData !!};
        var chartYData = {!! $yData !!};
        var chartTitle = {text: '{{ $cabinet['name'] }}'};
        var chartTooltip = {trigger: 'axis'};
        var chartYAxis = {type: 'value'};
        var chartDataZoom = [{}];

        var option = {
                title: chartTitle,
                tooltip: chartTooltip,
                xAxis: {
                    type: 'category',
                    data: chartXData
                },
                yAxis: chartYAxis,
                series: [{
                    data: chartYData,
                    type: 'line',
                    smooth: true
                }],
                dataZoom: chartDataZoom
            };
        console.log(111)
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        fullData({{ $pageSize }}, {{ $currentTotal }}, {{ $currentPage }});

        function fullData(pageSize, currentTotal, currentPage){
            if (currentTotal < pageSize) {
                setTimeout(getHistoryLineChart{{ $cabinet['id'] }}, 1000);
            } else {
                postFullData(currentPage);
            }
        }

        function postFullData(page){
            let url = "{{ URL::asset('admin/getHistoryLineChartPage') }}";
            let data = {
                _token: '{{ csrf_token() }}',
                page: page,
                cabinetId: {{ $cabinet['id'] }},
                alias: '{{ $alias }}',
                start: '{{ $start }}',
                end: '{{ $end }}'
            }
            $.ajax({
                type : "POST",
                url : url,
                data : data,
                success : function(result) {
                    if (result.code == 1) {
                        console.log(result.data.xData);
                        $("input[name='endX']").val(result.data.endX)
                        chartXData = chartXData.concat(result.data.xData)
                        chartYData = chartYData.concat(result.data.yData)
                        myChart.setOption({
                            title: chartTitle,
                            tooltip: chartTooltip,
                            xAxis: {
                                type: 'category',
                                data: chartXData
                            },
                            yAxis: chartYAxis,
                            series: [{
                                data: chartYData,
                                type: 'line',
                                smooth: true
                            }],
                            dataZoom: chartDataZoom
                        });
                        fullData(result.data.pageSize, result.data.currentTotal, result.data.currentPage);
                    } else {
                        fullData(result.data.pageSize, result.data.currentTotal, result.data.currentPage);
                        console.log(result.msg)
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    layer.close(e);
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
            console.log(data)
        }

        // setTimeout(getHistoryLineChart{{ $cabinet['id'] }}, 1000);

        function getHistoryLineChart{{ $cabinet['id'] }}() {
            console.log(333);
            if (window.parent.location.href.indexOf('cabinet-history-line-second') < 0) {
              return;
            }
            setTimeout(getHistoryLineChart{{ $cabinet['id'] }}, 1000);

            let url = "{{ URL::asset('admin/getHistoryLineChart') }}";
            var endX = $("input[name='endX']").val()
            let data = {
                _token: '{{ csrf_token() }}',
                endX: endX,
                cabinetId: {{ $cabinet['id'] }},
                alias: '{{ $alias }}'
            }
            $.ajax({
                type : "POST",
                url : url,
                data : data,
                success : function(result) {
                    if (result.code == 1) {
                        console.log(result.data.xData);
                        $("input[name='endX']").val(result.data.endX)
                        chartXData = chartXData.concat(result.data.xData)
                        chartYData = chartYData.concat(result.data.yData)
                        myChart.setOption({
                            title: chartTitle,
                            tooltip: chartTooltip,
                            xAxis: {
                                type: 'category',
                                data: chartXData
                            },
                            yAxis: chartYAxis,
                            series: [{
                                data: chartYData,
                                type: 'line',
                                smooth: true
                            }],
                            dataZoom: chartDataZoom
                        });
                    } else {
                        console.log(result.msg)
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    layer.close(e);
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }
    });
</script>